<script setup lang="ts">
import HomeView from './HomeView.vue'
const url =
  'https://prod-streaming-video-msn-com.akamaized.net/49a16a97-2dfb-4296-90f4-12459a46d5d5/c5fc2d44-2573-4fff-99d7-c863763063e6.mp4'
</script>

<template>
  <div>
    <div class="video-box">
      <video
        class="video-background"
        preload="auto"
        loop
        playsinline
        autoplay
        src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/62/83/1323338362/1323338362-1-192.mp4?e=ig8euxZM2rNcNbNg7WdVhwdlhbNBhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1699271099&gen=playurlv2&os=cosbv&oi=0&trid=6c2bbed1f3f14c898d3de40efc4318c0T&mid=504853639&platform=html5&upsig=e83576d84175fa922d24ca8c8f1f77f6&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform&bvc=vod&nettype=0&bw=234927&orderid=0,1&buvid=&build=0&mobi_app=&f=T_0_0&logo=80000000"
        tabindex="-1"
        muted="false"
      ></video>
    </div>
    <HomeView />
  </div>
</template>

<style scoped>
.container::after {
  content: '';
  display: block;
  clear: both;
}

.video-box {
  z-index: -10;
  /*进行视频裁剪*/
  overflow: hidden;
}

.video-box .video-background {
  position: absolute;
  left: 50%;
  top: 50%;
  /*保证视频内容始终居中*/
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /*保证视频充满屏幕*/
  object-fit: cover;
  min-height: 800px;
}
</style>
